<template>
	<view @click="clickFun" class="content_visible">
		<view v-if="visibleValue===null">
			<text>请选择</text> <uni-icons type="right"></uni-icons>
		</view>
		<view v-else>
			<view v-if="multiple">
				{{localdata.filter(item=>visibleValue?.includes(item.value))?.map(item=>item.text)?.join(',')}}
			</view>
			<view v-else>

				{{localdata.find(item=> item.value === visibleValue).text}}
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" background-color="#fff" :safe-area='true'>
			<view class="popup_box">
				<view class="popup_top">
					<view class="popup_cancelbtn">
						取消
					</view>
					<view class="popup_title">
						请选择
					</view>
					<view class="popup_confirmedbtn" @click="confirm">
						确定
					</view>
				</view>
				<view class="popup_content">
					<uni-data-checkbox mode="list" icon="right" :value='checkboxValue' :localdata="localdata" :multiple="multiple"
						@change="change"></uni-data-checkbox>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { computed, ref, toRaw, watch } from 'vue'
	const popup = ref(null)
	const props = defineProps({
		modelValue: {
			type: [String, Number, Array],
			default: () => ''
		},
		multiple: {
			type: Boolean,
			default: false
		},
		localdata: {
			type: Array,
			default: () => []
		}
	})
	const emit = defineEmits(['update:modelValue'])
	const checkboxValue = ref(toRaw(props.modelValue))
	const visibleValue = ref(null)

	// let checkboxValue = computed({
	// 	get() {
	// 		return props.modelValue
	// 	},
	// 	set(newVal) {
	// 	}
	// })
	//弹出层确认按钮
	const confirm = () => {
		visibleValue.value = checkboxValue.value
		emit('update:modelValue', checkboxValue.value)
		popup.value.close()
	}
	const change = val => {
		console.log(val, 'valvalval')
		if (props.multiple) {
			checkboxValue.value = val.detail.data.map(item => item.value)
		} else {
			checkboxValue.value = val.detail.value
		}

	}
	const clickFun = () => {
		console.log(432423)
		popup.value.open('bottom')
	}
</script>

<style lang="scss">
	.popup_box {
		width: 100%;

		.popup_top {
			display: flex;
			justify-content: space-between;
			padding: 10px 15px;
			align-items: center;

			.popup_cancelbtn {
				color: blue;

			}

			.popup_title {}

			.popup_confirmedbtn {
				color: blue;
			}
		}

		.popup_content {
			max-height: 300px;
			overflow-y: scroll;
			padding-bottom: 50px;
		}
	}
</style>